// 险种分布情况
import styles from "./InsuranceType.module.scss"
import Eprogress from "@/component/progress";
import Zempty from "@/component/zc-empty/zc-empty";
import React, { useRef } from "react";
import { useState } from "react";
import { useEffect } from "react";
import Loading from "@/component/loading/loading";

const InsuranceType = ({
    tooltips = true,//tooltips默认显示
    fieldNames = { name: "", nameAll: false, value: "" },//提示条后面要加的内容
    unit = null,//单位
    message,
    keyWord = [],
    loading = false,
    title = '模块标题',
    titleCenter,
    hideHeader = false,
    hideTitle,
    btn = [],
    hideBtn,
    hideDownBtn = true,
    style,
    ItemHeight,
    data = [{
        data: [
            // {
            //     name: "数据项1",
            //     value: 12
            // },
            // {
            //     name: "数据项2",
            //     value: 22
            // },
            // {
            //     name: "数据项3",
            //     value: 35
            // },
            // {
            //     name: "数据项4",
            //     value: 64
            // }
        ]
    }] }) => {
    const colorList = [
        {
            strokeColor: "rgb(113,219,250)",//进度条颜色
            trailColor: "rgba(113,219,250,0.3)",//未完成段的颜色

        },
        {
            strokeColor: "rgb(8,237,209)",//进度条颜色
            trailColor: "rgba(8,237,209,0.3)",//未完成段的颜色

        },
        {
            strokeColor: "rgb(46,136,255)",//进度条颜色
            trailColor: "rgba(46,136,255,0.3)",//未完成段的颜色

        },
        {
            strokeColor: "rgb(87,48,233)",//进度条颜色
            trailColor: "rgba(87,48,233,0.3)",//未完成段的颜色

        },
    ]
    const [list, setList] = useState([])
    const [current, setCurrent] = useState(0);

    useEffect(() => {

        setList(data[current].data)
    }, [data, current])


    // 下载弹框的控制
    const onRef = useRef(null)

    const downClick = () => {
        onRef.current.setOpen(true)
    }

    // 处理value，过滤掉里面的%，因为可能后端在这里返回的时候带了百分号
    const getVal = (str) => {
        if (str.toString().includes("%")) {
            return Number(str.replace("%", ""))
        }
        return str;
    }

    return (
        <>

            <div className={styles.card} style={{ ...style }}>
                <Loading loading={loading}>
                    <div className={styles.card_center} styles={{ height: "410px" }}>
                        {
                            hideHeader ? null :
                                <div className={styles.card_header}>
                                    <div className={styles.header_title} style={{ textAlign: titleCenter ? "center" : null }}>
                                        {title = hideTitle ? "" : title}
                                    </div>
                                    <div className={styles.header_btn}>

                                        {
                                            btn.map((item, index) => {
                                                if (hideBtn) {
                                                    return false;
                                                } else {
                                                    return (
                                                        <span onClick={() => setCurrent(index)} className={styles.header_btn_item} key={index} style={{ backgroundColor: current === index ? "dodgerblue" : "" }}>{item}</span>
                                                    )
                                                }

                                            })
                                        }
                                        {
                                            hideDownBtn ? null : <span className={styles.header_btn_item} onClick={() => downClick()}>下载</span>
                                        }
                                    </div>
                                </div>
                        }
                        <div className={styles.center_info}>
                            <Zempty show={list.length === 0 ? true : false} message={message} />
                            {
                                list.map((item, index) => {
                                    return (
                                        < div className={styles.item} key={index} style={{ height: ItemHeight ? ItemHeight : null }}>
                                            <div className={styles.item_center}>
                                                <Eprogress
                                                    tooltips={tooltips}
                                                    fieldNames={fieldNames}
                                                    title={item.name}
                                                    showInfo
                                                    style={{ width: 100 }}
                                                    hideHeader
                                                    trailColor={colorList[index].trailColor}
                                                    strokeColor={colorList[index].strokeColor}
                                                    state={getVal(item.value)}
                                                    statVal={item.statValue}
                                                    unit={unit}
                                                />
                                            </div>
                                            <div className={styles.item_word}>
                                                <span>{item.name}</span>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>

                    </div>
                </Loading>

            </div>
        </>
    )

};
export default InsuranceType;